.forget {
    height: 100%;
    background: url('../../img/image/forget.png');
    .topnav {
        width: 100%;
        height: 150px;
        background: #004529;
        .box {
            margin: 0 auto;
            width: 60%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            color: #fff;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            line-height: 50px;
            .left {
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                .logo {
                    width: 150px;
                    height: 100%; // background:rgba(216,216,216,1);
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                span {
                    margin-left: 30px;
                }
            }
            .right {
                a {
                    color: #fff;
                }
            }
        }
    }
    .loginbox {
        width: 360px;
        height: 395px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 6px;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -45%);
    }
    .loginitem {
        margin-top: 30px;
    }
    .item {
        margin: 15px auto;
        padding: 0 10px;
        box-sizing: border-box;
        width: 88%;
        line-height: 35px;
        background-color: #fff; // border: 1px solid 
        box-shadow: 0px 1px 3px 0px rgba(3, 59, 36, 0.4);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 5px;
    }
    .item input {
        line-height: 35px;
        width: 100%;
    }
    input::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #999;
    }
    input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #999;
    }
    input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #999;
    }
    input:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #999;
    }
    .item .iconfont {
        color: #666;
    }
    .item1 {
        background: transparent;
        padding-left: 0;
        box-shadow: none;
        button {
            width: 100%;
            line-height: 30px;
            background: rgba(227, 28, 28, 1);
            box-shadow: 0px 1px 3px 0px rgba(255, 255, 255, 0.5), 0px -1px 2px 0px rgba(57, 2, 2, 0.5), 1px 0px 3px 0px rgba(255, 255, 255, 0.3);
            border-radius: 2px;
        }
    }
    .item1 input {
        width: 60%;
        border-radius: 5px;
        padding-left: 10px;
        box-shadow: 0px 1px 3px 0px rgba(3, 59, 36, 0.4);
    }
    .item1 div {
        width: 35%;
        /* background-color: #566; */
        line-height: 30px;
        color: #fff;
        text-align: center;
    }
    .item1 div img {
        width: 100%;
        height: 100%;
    }
    .item2 {
        border-radius: 0px;
        background: #006303;
    }
    .item2 button {
        width: 100%;
        background: #006303;
        color: #fff;
        text-align: center;
        text-decoration: none;
        outline: none;
        border-style: none;
        -webkit-appearance: none;
    }
}

@media screen and (max-width: 480px) {
    .forget {
        .topnav {
            width: 100%;
            height: 100px;
            .box {
                width: 100%;
                height: 100%;
                padding: 0 10px;
                box-sizing: border-box;
                .left {
                    .logo {
                        width: 100px;
                    }
                }
            }
        }
    }
}